<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgb(243, 239, 8);
		}
		.anniu, .anniu::after {
			font-family: 'Do Hyeon', sans-serif;
			width: 260px;
			height: 80px;
			text-align: center;
			font-size: 22px;
			line-height: 80px;
			color: rgb(255, 251, 251);
			background: linear-gradient(30deg, transparent 10%, rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
			box-shadow: 5px 0 0 rgb(0, 204, 255);
			cursor: pointer;
			position: relative;
		}
		.anniu::after {
			content: 'Aurora Borealis night';
			position: absolute;
			top: 0;
			left: 0;
			text-shadow: -5px -2px 0 rgb(0, 183, 255),
			5px 2px 0 rgb(0, 255, 115);
			visibility: hidden;
		}
		.anniu:hover::after {
			animation: san 1s;
			animation-timing-function: steps(1, end);
		}
		/*
		clip-path: inset(20% -5px  60%  0);
		clip-path: inset(50% -5px  30%  0);
		clip-path: inset(80% -5px  5%  0);
		clip-path: inset(0 -5px  80%  0);
		 */
		@keyframes san {
			0% {
				clip-path: inset(20% -5px 60% 0);
				transform: translate(-6px, 5px);
				visibility: visible;
			}
			10% {
				clip-path: inset(50% -5px 30% 0);
				transform: translate(6px, -5px);
			}
			20% {
				clip-path: inset(20% -5px 60% 0);
				transform: translate(5px, 0px);
			}
			30% {
				clip-path: inset(80% -5px 5% 0);
				transform: translate(-8px, 5px);
			}
			40% {
				clip-path: inset(0 -5px 80% 0);
				transform: translate(-4px, -3px);
			}
			50% {
				clip-path: inset(50% -5px 30% 0);
				transform: translate(-6px, -5px);
			}
			60% {
				clip-path: inset(80% -5px 5% 0);
				transform: translate(-7px, 5px);
			}
			70% {
				clip-path: inset(0 -5px 80% 0);
				transform: translate(3px, 6px);
			}
			80% {
				clip-path: inset(50% -5px 30% 0);
				transform: translate(5px, 5px);
			}
			90% {
				clip-path: inset(20% -5px 60% 0);
				transform: translate(6px, -5px);
			}
			100% {
				clip-path: inset(0 -5px 80% 0);
				transform: translate(1px, 5px);
			}
		}
	</style>
</head>
<body>
	<div class="anniu">Aurora Borealis night</div>
</body>
</html>
